<template>
  <div id="cate">
    <!-- 头部 -->
    <div class="top">
      <NavBar cakename="蛋糕目录"></NavBar>
      <div class="top-list">
        <van-tabs color="#492321" @click-tab="handleaxios" :active="activeName">
          <van-tab
            :title="item.name"
            v-for="item in list.mulu"
            :key="item.id"
            :name="item.id"
          >
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 列表 -->
    <van-list
      :loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="5"
    >
      <div class="cont">
        <div v-for="item in cakelist.list" :key="item.id" class="content">
          <div @click="handleDet(item.id)">
            <div><img :src="item.cover.wap_cover" alt="" /></div>
            <div class="tit fs-24">
              <div class="cakename">{{ item.name.split(" ")[2] }}</div>
              <div class="emame">
                {{ item.name.split(" ")[0] }} {{ item.name.split(" ")[1] }}
              </div>
              <div class="price">
                <div v-if="item.specs[0].discount_price != item.specs[0].price">
                  ￥{{ item.specs[0].discount_price }}
                  <s>￥{{ item.specs[0].price }}</s>
                </div>
                <div v-else>￥{{ item.specs[0].price }}</div>
              </div>
              <div class="num">{{ item.specs[0].name }}</div>
            </div>
          </div>
          <i
            class="iconfont icon-ic_jiarugouwuche ic"
            @click="handleCartAdd(item.id)"
          ></i>
        </div>
      </div>
      <div v-if="finished">
        <div class="text-center m-t-30 fs-24 color-red">到底了</div>
        <div class="footer fs-24 color-red">
          <p>客服中心：4001-023-866</p>
          <p>重庆市江北区北滨一路456号S1栋四层商业3号商铺</p>
          <p>渝ICP备13001878号-3</p>
          <p>COPYRIGHT©2013-2022 Kissmilan 版权所有</p>
          <p>技术支持：迈小步科技</p>
        </div>
      </div>
    </van-list>

    <TabBar></TabBar>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick, onUpdated } from "vue";
import TabBar from "../components/TabBar.vue";
import NavBar from "../components/NavBar.vue";
import request from "../utils/request";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
import BScroll from "@better-scroll/core";

// 响应式数据
let route = useRoute();
let router = useRouter();
let store = useStore();
const activeName = ref(0);

const loading = ref(false);
const finished = ref(false);
let num = 1;
let cakelist = reactive({
  list: [],
  id: 0,
  cartitem: {},
});
let list = reactive({
  mulu: [],
});

// 提取用户信息
let userInfo = computed(() => {
  return store.state.user.userInfo;
});
let handleCartAdd = (goodsid) => {
  // console.log(store.state.cart.cartList);
  if (!userInfo.value) {
    //如果用户没有登录
    router.push("/login");
    return;
  }
  //如果用户登录了,发起请求，带着需要的数据触发action,存入购物车线上和状态机
  request
    .get(`/cake/o/home/product/${goodsid}/5?discount=0&gradeSpecIds=`)
    .then((res) => {
      // console.log(res);
      cakelist.cartitem = res.data.data;
      // console.log(cakelist.cartitem);
      let product_name = cakelist.cartitem.name;
      let pc_cover = cakelist.cartitem.cover.pc_cover;
      let { product_id, name, price, pic } = cakelist.cartitem.specs[0];
      store.dispatch("cart/cartAddAct", {
        userid: userInfo.value._id, //用户id
        id: product_id, //商品id
        product_name,
        product_price: price,
        product_spec_name: name, //规格
        product_quantity: 1,
        pc_cover,
        isCheck: true,
      });
    });
};

// 初次列表渲染,和首页传参渲染后初始化

const onLoad = () => {
  if (route.query.id) {
    cakelist.id = route.query.id * 1;
    console.log(typeof cakelist.id);
  }
  // 异步更新数据
  loading.value = true;
  request
    .get(
      `/cake/o/home/product?shop_id=5&category_id=${cakelist.id}&page=${num}&page_size=8&discount=0&gradeSpecIds=`
    )
    .then((res) => {
      loading.value = false;
      cakelist.list.push(...res.data.data.data);
      console.log(cakelist.list);
      // 加载状态结束
      num++;
      // 数据全部加载完成
      if (num == 7) {
        finished.value = true;
      }
    });
};

//头部列表 渲染
onMounted(() => {
  request.get("/cake/o/home/category?shop_id=5").then((res) => {
    activeName.value = route.query.id * 1;
    list.mulu = [{ name: "全部", id: 0 }, ...res.data.data];
  });
});

// 点击头部列表时蛋糕的渲染
let handleaxios = (e) => {
  console.log(e.name);
  document.documentElement.scrollTop = 0;
  let id = e.name;
  request
    .get(
      `/cake/o/home/product?shop_id=5&category_id=${id}&page=1&page_size=8&discount=0&gradeSpecIds=`
    )
    .then((res) => {
      cakelist.list = res.data.data.data;
      finished.value = false;
      num = 1;
    });
};

// 点击蛋糕时路由跳转和传参
let handleDet = (id) => {
  router.push({
    path: "/detail",
    query: { id },
  });
};
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
  color: #a36663;
}

#cate {
  padding-top: 18.2rem;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 75rem;
  z-index: 10;
}
.top-list {
  border-bottom: 1px solid #111;
}

.cont {
  padding: 0.3rem;
  display: flex;
  flex-wrap: wrap;

  .content {
    width: 37rem;
    margin-right: 0.4rem;
    position: relative;
  }

  .content:nth-of-type(2n) {
    margin-right: 0;
  }

  img {
    width: 37rem;
  }

  .tit {
    padding: 2rem;
    line-height: 4rem;
  }

  .price,
  .num {
    color: #bba080;

    s {
      color: #000;
    }
  }
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5rem 0 15rem 0;
}

.ic {
  color: #a36663;
  font-size: 20px;
  position: absolute;
  bottom: 2.4rem;
  right: 2.8rem;
}
</style>
